<template>
    <div class="order-manage">
        <!-- 搜索条件 -->
        <div class="search-condition">
            <div class="condition">
                <!-- 搜索第一行 -->
                <div class="first-line">
                    <!-- 工单编号 -->
                    <div class="search-wrapper">
                        <div class="search-label">工单编号：</div>
                        <el-input class="search-input" placeholder="请输入" v-model="workOrderNo" clearable></el-input>
                    </div>
                    <!-- 工单名称 -->
                    <div class="search-wrapper">
                        <div class="search-label">工单名称：</div>
                        <el-input
                            class="search-input"
                            placeholder="请输入"
                            v-model="workOrderName"
                            clearable
                        ></el-input>
                    </div>
                    <!-- 工单状态 -->
                    <div class="search-wrapper">
                        <div class="search-label">工单状态：</div>
                        <el-select v-model="workOrderStatus" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in orderStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <!-- 搜索第二行 -->
                <!-- <div v-show="expandConditionFlag" class="second-line">
          <div class="search-wrapper">
            <div class="search-label">备选测试：</div>
            <el-input
              class="search-input"
              placeholder="请输入"
              v-model="test"
              clearable
            >
            </el-input>
          </div>
        </div> -->
            </div>
            <div class="search">
                <el-row>
                    <el-button @click="resetQuery">重置</el-button>
                    <el-button type="primary" @click="resultQuery">查询</el-button>
                    <el-button type="text" @click="expandCondition">
                        展开
                        <i
                            :class="{
                                'el-icon-arrow-down': !expandConditionFlag,
                                'el-icon-arrow-up': expandConditionFlag
                            }"
                        ></i>
                    </el-button>
                </el-row>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="main-content" v-loading="loading">
            <!-- 操作按钮 -->
            <div class="handle-action">
                <el-row>
                    <el-button type="primary" @click="sceneProspect">现场勘察</el-button>
                    <el-button type="primary" @click="downDesign">下载布局设计</el-button>
                    <el-button type="primary" @click="quitOrder">退单</el-button>
                </el-row>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <!-- 工单状态 -->
                    <el-table-column label="工单状态" width="100" :formatter="formatterWorkStatus"></el-table-column>
                    <!-- 工单号 -->
                    <el-table-column prop="workOrderNo" label="工单号" width="140"></el-table-column>
                    <!-- 工程名称 -->
                    <el-table-column
                        prop="orderProjectName"
                        label="工单名称"
                        show-overflow-tooltip
                        width="200"
                    ></el-table-column>
                    <!-- 工程地址 -->
                    <el-table-column
                        prop="orderProjectAddress"
                        label="工程地址"
                        show-overflow-tooltip
                    ></el-table-column>
                    <!-- 施工面积 -->
                    <el-table-column prop="renovationTotalArea" label="施工面积" width="100"></el-table-column>
                    <!-- 年采区域 -->
                    <el-table-column prop="city" label="年采区域" width="100"></el-table-column>
                    <!-- 甲方联系人 -->
                    <el-table-column prop="followUpEmp" label="甲方联系人" width="100"></el-table-column>
                    <!-- 联系人电话 -->
                    <el-table-column prop="followUpPhone" label="联系人电话" width="120"></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
        <!-- 现场勘察 -->
        <scene-dialog
            v-if="sceneProspectFlag"
            :selectionForDialog="selectionForDialog"
            :sceneProspectFlag="sceneProspectFlag"
            @closeDialog="closeDialog"
        />
        <!-- 退单申请 -->
        <quit-order
            v-if="quitOrderFlag"
            :quitForDialog="quitForDialog"
            :quitOrderFlag="quitOrderFlag"
            @closeDialog="closeDialog"
        />
    </div>
</template>

<script>
import OrderManage from './OrderManage.js';
export default {
    ...OrderManage
};
</script>

<style scoped lang="less">
@import './OrderManage.less';
</style>
